<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置与维护</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        .setting-item {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        .setting-row {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
        }
        .setting-row label {
            width: 120px;
            font-weight: bold;
        }
        .setting-row input, .setting-row textarea {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .setting-row textarea {
            height: 80px;
        }
        .actions {
            text-align: center;
            margin-top: 20px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 0 5px;
        }
        button:hover {
            background-color: #45a049;
        }
        button.delete {
            background-color: #f44336;
        }
        button.delete:hover {
            background-color: #d32f2f;
        }
        .success-message {
            display: none;
            text-align: center;
            color: #4CAF50;
            font-weight: bold;
            margin: 15px 0;
            padding: 10px;
            background-color: #e8f5e9;
            border-radius: 4px;
        }
        .add-setting {
            margin-top: 20px;
            padding: 15px;
            border: 2px dashed #ddd;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
        }
        .add-setting:hover {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>系统设置与维护</h1>

    <div id="successMessage" class="success-message">
        设置保存成功！
    </div>

    <!-- 现有设置项 -->
    <div id="settingsContainer">
        <!-- 示例设置项 -->
        <div class="setting-item" id="setting1">
            <div class="setting-row">
                <label for="setting1_key">设置键:</label>
                <input type="text" id="setting1_key" value="backup_schedule_weekly" disabled>
            </div>
            <div class="setting-row">
                <label for="setting1_value">设置值:</label>
                <input type="text" id="setting1_value" value="1">
            </div>
            <div class="setting-row">
                <label for="setting1_desc">描述:</label>
                <input type="text" id="setting1_desc" value="备份周期">
            </div>
            <div class="actions">
                <button onclick="saveSetting('setting1')">保存</button>
                <button class="delete" onclick="deleteSetting('setting1')">删除</button>
            </div>
        </div>

        <div class="setting-item" id="setting2">
            <div class="setting-row">
                <label for="setting2_key">设置键:</label>
                <input type="text" id="setting2_key" value="default_charset" disabled>
            </div>
            <div class="setting-row">
                <label for="setting2_value">设置值:</label>
                <select id="setting2_value">
                    <option value="1" selected>UTF-8</option>
                    <option value="0">ASCII</option>
                    <option value="3">GBK</option>
                </select>
            </div>
            <div class="setting-row">
                <label for="setting2_desc">描述:</label>
                <input type="text" id="setting2_desc" value="编码设置">
            </div>
            <div class="actions">
                <button onclick="saveSetting('setting2')">保存</button>
                <button class="delete" onclick="deleteSetting('setting2')">删除</button>
            </div>
        </div>
    </div>

    <!-- 添加新设置项 -->
    <div class="add-setting" onclick="addNewSetting()">
        <span>+ 添加新设置项</span>
    </div>
</div>

<script>
    // 显示成功消息
    function showSuccessMessage() {
        const successMessage = document.getElementById('successMessage');
        successMessage.style.display = 'block';

        // 3秒后自动隐藏
        setTimeout(() => {
            successMessage.style.display = 'none';
        }, 3000);
    }

    // 保存设置
    function saveSetting(settingId) {
        // 这里应该是AJAX请求到后端API
        console.log(`保存设置 ${settingId} 的值到后端`);

        // 模拟保存成功
        showSuccessMessage();
    }

    // 删除设置项
    function deleteSetting(settingId) {
        if (confirm('确定要删除这个设置项吗？')) {
            // 获取要删除的元素
            const settingElement = document.getElementById(settingId);

            if (settingElement) {
                // 从DOM中移除元素
                settingElement.remove();

                // 这里应该是AJAX请求到后端API删除数据
                console.log(`删除设置 ${settingId} 从后端`);

                showSuccessMessage();
            }
        }
    }

    // 添加新设置项
    let settingCounter = 3; // 示例中已有2个设置项
    function addNewSetting() {
        const container = document.getElementById('settingsContainer');

        const newSettingId = `new_setting_${settingCounter}`;

        const newSetting = document.createElement('div');
        newSetting.className = 'setting-item';
        newSetting.id = newSettingId;

        newSetting.innerHTML = `
                <div class="setting-row">
                    <label for="${newSettingId}_key">设置键:</label>
                    <input type="text" id="${newSettingId}_key" placeholder="输入设置键">
                </div>
                <div class="setting-row">
                    <label for="${newSettingId}_value">设置值:</label>
                    <input type="text" id="${newSettingId}_value" placeholder="输入设置值">
                </div>
                <div class="setting-row">
                    <label for="${newSettingId}_desc">描述:</label>
                    <input type="text" id="${newSettingId}_desc" placeholder="输入设置描述">
                </div>
                <div class="actions">
                    <button onclick="saveSetting('${newSettingId}')">保存</button>
                    <button class="delete" onclick="deleteSetting('${newSettingId}')">删除</button>
                </div>
            `;

        container.appendChild(newSetting);
        settingCounter++;
    }
</script>
</body>
</html>